/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="topBar">
			<view class="status"></view>
		</view>
		<view class="header">

		</view>
		<!-- 个人资料 -->
		<view class="top">
			<view class="box">
				<view class="person">
					<view class="avatar">
						<image :src="shopper.logo ? shopper.logo : imgStaticUrl+'images/logo.png'"></image>
					</view>
					<view class="personInfo">
						<view class="name c3 f32">{{shopper.shop_name}}</view>

					</view>
				</view>
				<view class="menus">
					<view class="item" @click="navigateTo('/pagesB/seller/order_finish')">
						<view class="volum f32 c3">{{count1}}</view>
						<view class="label f26 c6">{{$t('订单完成')}}</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/seller/order_fail')">
						<view class="volum f32 c3">{{count2}}</view>
						<view class="label f26 c6">{{$t('订单失败')}}</view>
					</view>
					<view class="item"
						@click="$u.route({url:'/pagesB/seller/order_appraise',params:{shop_id:shopper.id}})">
						<view class="volum f32 c3">{{count3}}</view>
						<view class="label f26 c6">{{$t('订单评价')}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 客户订单 -->

		<view class="box">
			<view class="innerBox">
				<view class="serviceList">
					<view class="item" @click="toLive(shopper.id)">
						<view class="icon">
							<image src="@/static/images/service1.png"></image>
						</view>
						<view class="text f26 c3">{{$t('我要直播')}}</view>
					</view>
					<view class="item" @click="navigateToArticle('平台客服')">
						<view class="icon">
							<image src="@/static/images/service2.png"></image>
						</view>
						<view class="text f26 c3">{{$t('平台客服')}}</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/seller/account')">
						<view class="icon">
							<image src="@/static/images/service3.png"></image>
						</view>
						<view class="text f26 c3">{{$t('子账号')}}</view>
					</view>

				</view>

			</view>
		</view>
		<!-- 购物车 -->
		<view class="box">

			<view class="innerBox">
				<view class="title">
					<view class="titleLeft f28 c3">{{$t('我的订单')}}</view>
					<view class="titleRight f24 c9" @click="order('/pagesB/seller/allOrder',{index:0})">{{$t('全部订单')}}<view
							class="more"></view>
					</view>
				</view>
				<view class="Orderlist">
					<view class="item" @click="order('/pagesB/seller/allOrder',{index:1})">

						<view class="icon">
							<image src="@/static/images/sell_icon1.png"></image>
						</view>
						<view class="text f24 c6">{{$t('待付款')}}{{shopNum.pay_num}}</view>
					</view>
					<view class="item" @click="order('/pagesB/seller/allOrder',{index:2})">

						<view class="icon">
							<image src="@/static/images/sell_icon2.png"></image>
						</view>
						<view class="text f24 c6">{{$t('待发货')}}{{shopNum.send_num}}</view>
					</view>
					<view class="item" @click="order('/pagesB/seller/allOrder',{index:3})">

						<view class="icon">
							<image src="@/static/images/sell_icon3.png"></image>
						</view>
						<view class="text f24 c6">{{$t('待收货')}}{{shopNum.shou_num}}</view>
					</view>
					<view class="item" @click="order('/pagesB/seller/allOrder',{index:4})">

						<view class="icon">
							<image src="@/static/images/sell_icon4.png"></image>
						</view>
						<view class="text f24 c6">{{$t('待评价')}}{{shopNum.ping_num}}</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/seller/tuikuan')">

						<view class="icon">
							<image src="@/static/images/sell_icon5.png"></image>
						</view>
						<view class="text f24 c6">{{$t('退款/退货')}}{{shopNum.huan_num}}</view>
					</view>

				</view>
			</view>
		</view>
		<view class="box clouseout">
			<view class="innerBox">
				<view class="title">
					<view class="total">
						<view class="text1 c3 f26">{{$t('待结算金额')}}:</view>
						<view class="price">¥ {{billing.money}}</view>
					</view>
					<view class="date f24 c9">{{$t('结算日每月')}} {{billing.accountDays}}号</view>
				</view>
				<view class="descripe">
					<view class="left">
						<view class="line">{{$t('当月交易笔数')}}:<text class="number"> {{billing.monthDealCount}}</text></view>
						<view class="line">{{$t('当月交易金额')}}:<text class="number"> ¥{{billing.monthDealMoney}}</text></view>
					</view>
					<view class="right">
						<view class="line">{{$t('当月退货笔数')}}:<text class="number"> {{billing.monthReturnCount}}</text></view>
						<view class="line">{{$t('当月退货金额')}}:<text class="number"> ¥{{billing.monthReturnMoney}}</text></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStaticUrl: this.STATICURL,
				shop_id: '',
				shopper: {},
				billing: {},
				filter: '',
				count1: '',
				count2: '',
				count3: '',
				shopNum: '',
				isService: false,
			}
		},
		onLoad(option) {
			this.isService = uni.getStorageSync('role') === 'service'
			this.shop_id = option.shop_id
			this.getShopperDetail()
			const list = [9, 7, 8]
			list.forEach((item, index) => {
				this.getAllNum(item, index)
			})

		},

		methods: {
			// 后退
			back() {
				this.getback();
			},
			navigateToArticle(url) {
				uni.navigateTo({
					url: `/pagesB/article/detail?title=${url}`,
				})
			},
			toLive(id) {
				uni.setStorage({
					key: 'openLiveID',
					data: id,
					success: function() {
						// #ifndef APP-PLUS
						uni.navigateTo({
							url: '/pagesB/seller/live'
						});
						// #endif
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pagesC/live/Anchor'
						});
						// #endif
					}
				});

			},
			navigateTo(url) {
				this.$navigateTo(url);
			},
			// 跳转至订单列表页面
			order(url, data) {
				this.$navigateTo(url, data)
			},
			getShopperDetail() {
				this.$http.getShopperDetail({
					shop_id: this.shop_id
				}).then(res => {
					this.shopper = res.data.shops;
					this.billing = res.data.billing;
					this.shopNum = res.data;
				})
			},
			getAllNum(filter, index) {
				this.$http.getorderCount({
					filter,
				}).then(res => {
					this['count' + (index + 1)] = res.data.count
					this.$set(this, 'count' + (index + 1), res.data.count)
				})

			},


		},
		onNavigationBarButtonTap() {
			this.getnav('/pagesB/seller/message')
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding-top: 200upx;

		.clouseout {
			display: none;
		}

		.topBar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			color: #fff;
			height: 141upx;
			z-index: 3;
			background-size: cover;

			.nav {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 36upx;
				}

				.nav-left {
					position: absolute;
					left: 32upx;

					image {
						width: 21upx;
						height: 39upx;
					}
				}

				.nav-right {
					font-size: 28upx;
					position: absolute;
					right: 32upx;
					color: #fff;
					z-index: 9999;

					image {
						width: 40upx;
						height: 40upx;
					}

					.text {
						font-size: 20upx;
						line-height: 20upx;
					}

					.badge {
						width: 26upx;
						height: 26upx;
						border-radius: 50%;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						top: -10upx;
						right: -10upx;
						position: absolute;

						.text {
							color: #FA3E3F;
							font-size: 20upx;
						}
					}
				}
			}
		}

		.header {
			width: 100%;
			height: 409upx;
			position: fixed;
			left: 0;
			top: 0;
			background-image: linear-gradient(to right, #ffa468, #fa3e3f);
			background-size: cover;
		}

		.top {
			padding: 0 32upx;
			position: relative;

			.box {
				background: #fff;
				height: 316upx;
				border-radius: 20upx;
				display: flex;
				flex-direction: column;

				.person {
					display: flex;
					align-items: center;
					padding: 32upx;

					.avatar {
						width: 120upx;
						height: 120upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background: #f5f5f5;
						}
					}

					.personInfo {
						margin-left: 24upx;

						.name {
							font-size: 36upx;
						}

						.grade {
							width: 164upx;
							display: flex;
							align-items: center;
							background: rgba(206, 162, 95, 0.1);
							height: 40upx;
							color: #CEA25F;
							justify-content: center;
							margin-top: 24upx;
							border-radius: 24upx;

							image {
								width: 36upx;
								height: 18upx;
								margin-left: 4upx;
							}
						}
					}
				}

				.menus {
					flex: 1;
					display: flex;
					align-items: flex-end;
					padding-bottom: 32upx;
					justify-content: center;

					.item {
						text-align: center;
						flex: 1;

						.volum {
							line-height: 37upx;
						}

						.label {
							line-height: 37upx;
							margin-top: 8upx;
						}
					}
				}
			}
		}

		.box {
			padding: 0 32upx;
			margin-top: 20upx;
			position: relative;

			.innerBox {
				background: #fff;
				border-radius: 20upx;
				padding: 32upx 0;

				&.tools {
					padding-bottom: 0;
				}

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 32upx 24upx;
					border-bottom: 1upx solid rgba(244, 244, 244, 1);

					&.distribution {
						border-bottom: none;
						padding-bottom: 0;
					}

					.titleLeft {
						line-height: 40upx;
						display: flex;
						align-items: center;

						image {
							width: 25upx;
							height: 25upx;
							margin-right: 8upx;
						}
					}

					.titleRight {
						display: flex;
						align-items: center;

						.more {
							margin-left: 12upx;
						}
					}

					.total {
						.text1 {
							line-height: 37upx;
							font-weight: 400;
							padding-bottom: 16upx;
						}

						.price {
							font-size: 42upx;
							line-height: 48upx;
							font-weight: bold;
							color: #FA3E3F;
						}
					}
				}

				.Orderlist {
					display: flex;
					align-items: center;
					margin-top: 17upx;
					flex-wrap: wrap;

					.item {

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;

						.icon {
							width: 56upx;
							height: 56upx;

							image {
								width: 56upx;
								height: 56upx;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 6upx;
						}

					}
				}

				.descripe {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12upx 32upx 0;

					.line {
						font-size: 26upx;
						color: #999;
						font-weight: 400;
						line-height: 37upx;
						padding-top: 12upx;

						text {
							color: #666;
						}
					}
				}

				.serviceList {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						margin-top: 24upx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 25%;

						.icon {
							width: 84upx;
							height: 84upx;

							image {
								width: 84upx;
								height: 84upx;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 16upx;
						}

					}
				}
			}
		}
	}
</style>
